<template>
    <div class="ta-container">
        <header>
            <router-link to="/timer">
                <a-button class="btn">返回</a-button>
            </router-link>
            <p class="title">计时器统计分析</p>
        </header>
        <main>
            <a-row :gutter="[5, 5]">
                <a-col :span="6">
                    <a-card>
                        <Pie :dataList="dataList" />
                    </a-card>
                </a-col>
                <a-col :span="12">
                    <a-card>
                        <Zhe :dataList="dataList" />
                    </a-card>
                </a-col>
                <a-col :span="6">
                    <a-card>
                        <div class="total">
                            <a-row :gutter="16">
                                <a-col :span="12">
                                    <a-statistic title="完成总量" :value="achieveTime" >
                                        <template #suffix>
                                            min
                                        </template>
                                    </a-statistic>
                                </a-col>
                                <a-col :span="12">
                                    <a-statistic title="完成次数" :value="achieveCount" class="demo-class">
                                        <template #suffix>
                                            <span> 次</span>
                                        </template>
                                    </a-statistic>
                                </a-col>
                            </a-row>
                        </div>
                    </a-card>
                </a-col>

            </a-row>
            <a-row :gutter="[5, 5]">
                <a-col :span="24">
                    <a-card>
                        <Calendar :dataList="dataList" />
                    </a-card>
                </a-col>
            </a-row>
        </main>

    </div>
</template>

<script>
import Pie from './modules/Pie';
import Calendar from './modules/Calendar';
import Zhe from './modules/Zhe';

export default {
    name: 'TimerAnalyse',

    data() {
        return {
            dataList: [],
            achieveTime: 0,
            achieveCount: 0,
        };
    },

    mounted() {
        this.init()
    },
    components: {
        Pie,
        Calendar,
        Zhe,
    },

    methods: {
        init() {
            this.dataList = JSON.parse(localStorage.getItem('userHistoryData'))
            this.getData()
        },
        // 得到已完成分钟量、已完成次数
        getData() {
            this.dataList.map(item => {
                let arr = item.settingTime.split(' : ')
                let count = arr[0] * 60 + arr[1] * 1 + arr[2] / 60
                // 保留两位小数
                count = Math.ceil(count * 100) / 100
                if(item.isAchieve == 'true')  {
                    this.achieveTime += count
                    this.achieveCount++
                }
            })
        }
        

     
    },
};
</script>

<style lang="less" scoped>
.ta-container {
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
    // overflow: hidden;

    header {
        border-bottom: 1px solid rgb(234, 234, 234);
        height: 8vh;
        line-height: 8vh;
        // position: relative;
        display: flex;
        box-sizing: border-box;
        align-items: center;
        box-shadow: 0 0 10px rgb(246, 246, 246);

        .btn {
            margin-left: 10px;
        }

        button {
            padding: 0 25px;
        }

        .title {
            margin-left: 20px;
            font-size: 16px;
            font-weight: 700;
        }
    }

    main {
        padding: 8px;
        box-sizing: border-box;
        height: 92vh;

        .ant-card {
            box-shadow: 0 0 10px rgb(246, 246, 246);

            // border: none;
            /deep/ .ant-card-body {
                padding: 0 !important;
            }
        }

        .total {
            height: 45vh;
            padding: 25px 25px;

        }
    }
}
</style>